<script lang="ts" setup>
import indexText from "./indexText.json"
import { ref } from "vue"
import { storeToRefs } from "pinia";
import useChartExample from "../../store/chartExample"

const { userName, userID } = storeToRefs(useChartExample())
const routeIndex = ref<number>(0)
</script>

<template>
  <div class="listenTop">
    <p class="userName"><b>{{ userName }}</b>的听歌排行</p>
    <div class="childView">
      <ul>
        <li v-for="(item, index) in indexText.childNav" :class="index === routeIndex ? 'childActive' : ''"
          @click="() => routeIndex = index">
          <RouterLink :to="item.to">
            {{ item.text }}
          </RouterLink>
        </li>
      </ul>
    </div>
    <RouterView />
  </div>
</template>

<style lang="scss" scoped>
.listenTop {
  width: 100%;
  height: 93%;
  padding-bottom: 35px;
  box-sizing: border-box;
  overflow: auto;

  .userName {
    font-size: $font-size-lg;
    font-family: $textFont;
    margin: 15px 0 0 30px;
  }

  .childView {
    width: 100%;
    margin-top: 10px;

    ul {
      display: flex;
      border-bottom: 1px solid $lineColor;

      li {
        line-height: 30px;
        margin-left: 30px;
        font-size: $font-size-sm;
        font-family: $textFont;
        color: $font_second_color;
      }

      .childActive {
        font-family: $activeTextFont;
        font-size: 16px;
        color: $font_main_color;
      }
    }
  }
}
</style>
